<script setup lang="ts">
import type { PropType } from 'vue';
import { nextTick, onMounted, ref } from 'vue';
import BaseImage from '~/components/BaseImage.vue';
import avatar from '/images/webp/notification/avatar.webp';
import emojiIcon from '/images/webp/notification/emoji_icon.webp';
import transferIcon from '/images/webp/notification/transfer_icon.webp';
const { t } = useI18n()
interface ChatMessage {
  id: number;
  sender: 'user' | 'support' | 'system';
  type: 'text' | 'transfer';
  content?: string;
  amount?: number;
  status?: 'pending' | 'received';
  time: string;
  avatar?: string;
}

interface FeedbackItem {
  id: string;
  time: string;
  status: '待处理' | '已完成';
  content: string;
  chatHistory?: ChatMessage[];
}

const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  feedbackItem: {
    type: Object as PropType<FeedbackItem | null>,
    required: true,
  },
});

const emit = defineEmits(['close']);

const chatMessagesContainer = ref<HTMLElement | null>(null);

const closeChatModal = () => {
  emit('close');
};

// 模拟聊天记录，实际应从 props.feedbackItem 中获取
const chatMessages = ref<ChatMessage[]>([]);

const newMessage = ref('');

const sendMessage = () => {
  if (newMessage.value.trim() === '') return;
  chatMessages.value.push({
    id: Date.now(),
    sender: 'user',
    type: 'text',
    content: newMessage.value,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false }),
  });
  newMessage.value = '';
  scrollToBottom();
};

const scrollToBottom = () => {
  nextTick(() => {
    if (chatMessagesContainer.value) {
      chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
    }
  });
};

onMounted(() => {
  if (props.show) {
    scrollToBottom();
  }
});

// Watch for changes in feedbackItem to update chat messages
// This is a placeholder for actual data loading logic
// watch(() => props.feedbackItem, (newItem) => {
//   if (newItem && newItem.chatHistory) {
//     chatMessages.value = newItem.chatHistory;
//   } else {
//     // Load default/mock messages if no history
//     chatMessages.value = [ /* ... mock messages ... */ ];
//   }
//   scrollToBottom();
// }, { immediate: true });

// Watch for show prop to scroll to bottom when modal becomes visible
// watch(() => props.show, (newVal) => {
//   if (newVal) {
//     scrollToBottom();
//   }
// });

</script>

<template>
  <div v-if="show" class="chat-modal-overlay" @click.self="closeChatModal">
    <div class="chat-modal-mask"></div>
    <div class="chat-modal-container">
      <div class="chat-modal-header">
        <div class="chat-modal-title">{{ t('feedback_title') }}</div>
        <div class="chat-modal-close" @click="closeChatModal">
          ×
        </div>
      </div>
      <div ref="chatMessagesContainer" class="chat-modal-content">
        <div v-for="(message, index) in chatMessages" :key="message.id" class="chat-message-wrapper">
          <!-- 客服初始消息卡片 -->
          <div v-if="message.sender === 'support' && index === 0" class="support-message support-card">
            <div class="support-card-header">
              <BaseImage :url="avatar" width="24px" />
              <div class="support-info">
                <span class="support-name">德语</span>
                <span class="support-time">现在</span>
              </div>
            </div>
            <div class="support-card-content">
              {{ message.content }}
            </div>
          </div>
          <!-- 第二条客服消息 -->
          <div v-else-if="message.sender === 'support' && index === 1" class="support-message support-bubble">
            {{ message.content }}
          </div>

          <!-- 系统文本消息 (例如 "感谢反馈！亲～") -->
          <template v-else-if="message.sender === 'system' && message.type === 'text'">
            <div class="message-time">{{ message.time }}</div>
            <div class="chat-message items-start"> <!-- Wrapper for left alignment -->
              <div class="message-bubble-wrapper support-bubble-wrapper"> <!-- Re-use support wrapper for alignment -->
                <div class="message-bubble system-text-bubble">
                  <p>{{ message.content }}</p>
                </div>
              </div>
            </div>
          </template>

          <!-- 其他消息 (用户消息, 非前两条的客服消息, 转账消息) -->
          <div v-else :class="[
            'chat-message',
            `message-sender-${message.sender}`, // Handles flex alignment (user right, support left)
            `message-type-${message.type}`,
            message.sender === 'user' ? 'items-end' : 'items-start',
          ]">
            <div
              :class="['message-bubble-wrapper', message.sender === 'user' ? 'user-bubble-wrapper' : 'support-bubble-wrapper']">
              <div :class="[
                'message-bubble',
                message.sender === 'user' && message.type === 'text' ? 'user-bubble' : '',
                message.sender === 'support' && message.type === 'text' ? 'support-bubble' : '',
                message.type === 'transfer' ? 'transfer-bubble' : '',
                message.type === 'transfer' && message.sender === 'system' ? 'system-transfer-pending' : '',
                message.type === 'transfer' && message.sender === 'user' ? 'user-transfer-received' : ''
              ]">
                <template v-if="message.type === 'text'">
                  <p>{{ message.content }}</p>
                </template>
                <template v-if="message.type === 'transfer'">
                  <div class="transfer-content">
                    <div class="transfer-icon-wrapper">
                      <BaseImage :url="transferIcon" />
                    </div>
                    <div class="transfer-details">
                      <span class="transfer-amount">¥{{ message.amount?.toFixed(2) }}</span>
                      <span class="transfer-status">{{ message.status === 'pending' ? '待领取' : '已领取' }}</span>
                    </div>
                  </div>
                  <div class="transfer-action">客服转账</div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chat-modal-input-area">
        <input type="text" v-model="newMessage" @keyup.enter="sendMessage" :placeholder="t('chat_input_message')"
          class="chat-input" />
        <button class="emoji-button">
          <BaseImage width="20px" :url="emojiIcon" />
        </button>
        <button @click="sendMessage" class="send-button">{{ t('send_text') }}</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chat-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.chat-modal-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  background-color: #1A1C1C;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  animation: slideUp 0.3s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.chat-modal-header {
  position: relative;
  padding: 16px;
  text-align: center;
  background: #232626;
}

.chat-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.chat-modal-close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: #4A5354;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
}

.chat-modal-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 14px;
  background-color: #232626;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message-wrapper {
  display: flex;
  flex-direction: column;
}

.message-time {
  font-size: 12px;
  color: #707879;
  text-align: center;
  margin: 16px 0;
}

.message-time-inline {
  font-size: 10px;
  color: #707879;
  margin-left: 8px;
}

.user-time {
  align-self: flex-end;
  margin-top: 4px;
  margin-right: 10px;
}

.chat-message {
  display: flex;
  width: 100%;
  margin-bottom: 0px;
}

.message-sender-support {
  justify-content: flex-start;
}

.message-sender-user {
  justify-content: flex-end;
}

.message-sender-system {
  align-items: start;
  flex-direction: column;
}

.message-sender-system .message-bubble {
  color: #ffffff;
  font-size: 14px;
}

.message-bubble-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.support-bubble-wrapper {
  align-items: flex-start;
}

.user-bubble-wrapper {
  align-items: flex-end;
}

.support-name-time {
  font-size: 12px;
  color: #B3BEC1;
  margin-bottom: 4px;
}

.message-bubble {
  padding: 12px 15px;
  border-radius: 8px;
  max-width: 100%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.5;
}

.support-bubble {
  background-color: #2D3233;
  color: rgba(255, 255, 255, 0.9);
  width: 314px;
  height: 77px;
  max-width: 314px;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 13px 17px;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
  transform: translateY(-10px);
}

.user-bubble {
  background-color: #24EE89;
  color: #000;
  border-radius: 20px 20px 4px 20px;
}

.message-type-transfer .transfer-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  min-width: 180px;
}

.transfer-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.transfer-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transfer-amount {
  font-size: 16px;
  font-weight: bold;
}

.system-transfer-pending .transfer-amount,
.system-transfer-pending .transfer-status {
  color: #FFFFFF;
}

.user-transfer-received .transfer-amount,
.user-transfer-received .transfer-status {
  color: #FFFFFF;
}

.transfer-status {
  font-size: 12px;
}

.transfer-action {
  font-size: 12px;
  border-top: 1px solid;
  padding: 6px;
  font-weight: 500;
}

.system-transfer-pending .transfer-action {
  color: #FFFFFF;
  border-top-color: var(---white-hsl-0FFFFFF, #FFFFFF);
}

.user-transfer-received .transfer-action {
  color: #FFFFFF;
  border-top-color: var(---white-hsl-0FFFFFF, #FFFFFF);
}

.transfer-bubble {
  padding: 10px 15px;

}

.system-transfer-pending {
  background: linear-gradient(0deg, #FF9800, #FF9800);
  color: #FFFFFF;
  border-radius: 8px;
}

.user-transfer-received {
  background-color: #FADDB6;
  color: #FFFFFF;
  border-radius: 8px;
}

.chat-modal-input-area {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #292D2E;
}

.chat-input {
  flex-grow: 1;
  background-color: #3A4142;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  margin-right: 0;
}

.chat-input::placeholder {
  color: #707879;
}

.emoji-button {
  background-color: #3A4142;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-left: 0;
  margin-right: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-1px);
}

.emoji-button svg {
  display: block;
}

.send-button {
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

.slide-down {
  animation: slideDown 0.3s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

/* 新增客服卡片样式 */
.support-card {
  background-color: #2D3233;
  border-radius: 16px;
  padding: 16px;
}

.support-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.support-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #FFFFFF;
}

.support-name {
  color: #FFFFFF;
}

.support-time {
  color: #FFFFFF;
}

.support-name::after {
  content: "·";
  margin: 0 1px;
  opacity: 0.6;
  width: 8px;
  height: 8px;
}

.support-card-content {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.9;
}

/* 支持消息基础样式 - 仅用于前两条客服消息 */
.support-message {
  width: 314px;
  max-width: 314px;
  background-color: #3A4142;
  color: rgba(255, 255, 255, 0.9);
  padding: 13px 17px;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
}

/* 第一条消息卡片样式 */
.support-message.support-card {
  border-radius: 20px 20px 20px 4px;
  margin-bottom: 4px;
}

.support-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.support-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
}

.support-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.support-name {
  color: #FFFFFF;
}

.support-name::after {
  content: "·";
  opacity: 0.6;
}

.support-card-content {
  color: #FFFFFF;
  opacity: 0.9;
}


.support-message.support-bubble {
  border-radius: 4px 20px 20px 20px;
}

.message-bubble {
  padding: 12px 15px;
  border-radius: 8px;
  /* 默认圆角,会被特定类型覆盖 */
  max-width: 100%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.5;
}


.message-bubble.support-bubble:not(.support-message):not(.transfer-bubble) {
  background-color: #3A4142;
  color: #E6E8E8;
  border-radius: 20px 20px 20px 4px;
  /* 客服独特圆角 */
  /* padding 从 .message-bubble 继承 */
}

/* 用户文本气泡 */
.message-bubble.user-bubble {
  background-color: #24EE89;
  color: #000;
  border-radius: 20px 20px 4px 20px;
  /* 用户独特圆角 */
  /* padding 从 .message-bubble 继承 */
}

/* 系统待领取转账 */
.message-bubble.system-transfer-pending.transfer-bubble {
  background: linear-gradient(0deg, #FF9800, #FF9800);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 0;
  /* 转账特定圆角 */
}

/* 用户已领取转账 */
.message-bubble.user-transfer-received.transfer-bubble {
  background-color: #FFC166;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 0;
  /* 转账特定圆角 */
}

/* 新增：系统文本消息气泡样式 */
.message-bubble.system-text-bubble {
  background-color: #3A4142;
  color: #E6E8E8;
  border-radius: 20px 20px 20px 4px;
  max-width: fit-content;
  text-align: left;
}
</style>
